<template>
  <el-form-item :label="i18nt('designer.setting.valueFormat')">
    <el-select v-model="optionModel.valueFormat" filterable allow-create>
      <el-option :label="item.label" :value="item.value" v-for="item in options" :key="item.value"></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
import i18n from "@/utils/i18n";

export default {
  name: "date-valueFormat-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      options: [
        { label: "YYYY-MM-DD", value: "YYYY-MM-DD" },
        { label: "YYYY-MM-DD HH:mm:ss", value: "YYYY-MM-DD HH:mm:ss" },
        { label: "YYYY-MM", value: "YYYY-MM" },
        { label: "YYYY", value: "YYYY" },
      ],
    };
  },
  watch: {
    "optionModel.type": {
      handler(val) {
        console.log(val);
        switch (val) {
          case "date":
            this.options = [
              { label: "YYYY-MM-DD", value: "YYYY-MM-DD" },
            ];
            this.optionModel.valueFormat = "YYYY-MM-DD";
            break;
          case "datetime":
            this.options = [
              { label: "YYYY-MM-DD HH:mm:ss", value: "YYYY-MM-DD HH:mm:ss" },
              { label: "YYYY-MM-DD hh:mm:ss", value: "YYYY-MM-DD hh:mm:ss" },
            ];
            this.optionModel.valueFormat = "YYYY-MM-DD HH:mm:ss";
            break;
          case "year":
            this.options = [{ label: "YYYY", value: "YYYY" }];
            this.optionModel.valueFormat = "YYYY";
            break;
          case "month":
            this.options = [{ label: "YYYY-MM", value: "YYYY-MM" }];
            this.optionModel.valueFormat = "YYYY-MM";
            break;
          case "week":
            this.options = [
              { label: "YYYY-MM-DD", value: "YYYY-MM-DD" },
            ];
            this.optionModel.valueFormat = "YYYY-MM-DD";
            break;
          default:
        }
      },
      deep: true,
      immediate: true,
    },
  }
};
</script>

<style scoped>
</style>
